<template>
	<view>
		<view class="nav">
			<u-tabs :activeStyle="{color:'#0083FE'}" @change="choose" :scrollable="false" :current="tabsindex"
				lineColor="#0083FE" :list="tabs"></u-tabs>
		</view>
		<view v-if="list.length==0">
			<u-empty marginTop="80"></u-empty>
		</view>
		<!-- 未使用 -->
		<view>
			<view class="pl20 pr20 address-card " :class="'type_'+(type?1:0)" v-for="(item,index) in list" :key="index">
				<view class="bgfff path-card">
					<view class="left-box relative">
						<view class="times-box">
							<view class="num-box">
								<text class="bnum">1</text>次
							</view>
						</view>
						<view class="rd-t"></view>
						<view class="rd-b"></view>
					</view>
					<view class="right-box">
						<view class="pt24 pl24 pr20 relative">
							<view class="dsf alc pb26 ">
								<view class="col666 address-title">{{item.name}}</view>
							</view>
							<view class="pb20">
								<view class="fz24 col777 address-detail">
									有效期至{{item.updated_at}}
								</view>
							</view>
							<view @click="use_com(item)" class="pb20 dsf alc absolute use-bnt">
								<view class="fz24 col0195FD pl10 ubnt">去使用</view>
							</view>


						</view>
					</view>




				</view>
			</view>
		</view>



	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					name: this.$t("未使用")
				}, {
					name: this.$t("已使用")
				}, {
					name: this.$t("已到期")
				}],
				tabsindex: 0,
				type: 0,
				list: [],
				listover: [],
				listday: [],
				param: {

				},
				is_use: 0
			}
		},
		onLoad(e) {
			if (e.is_use) {
				this.is_use = e.is_use;
			}
		},
		onShow() {
			this.getList();

		},
		methods: {
			getList() {
				this.$api['get']("user/have-coupon", this.param).then(res => {
					if (res.code == 200) {
						this.list = res.data;

					}
				});
			},
			choose(e) {
				this.type = e.index
			},
			use_com(item) {
				if (this.is_use == 1) {
					this.$store.commit("setCouponInfo", item);
					this.$go('neworder/confirm');
				} else {
					this.$go('index/index');
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #F6F6F6;
	}

	.nav {
		background-color: #fff;
		//border-top: 1upx solid #bfe0ff
	}

	.list {
		padding: 14upx 32upx 150upx
	}

	.list .item {
		background-color: #fff;
		border-radius: 20upx;
		padding: 28upx 30upx
	}

	.list .item~.item {
		margin-top: 14upx
	}

	.acea-row {
		display: -webkit-flex;
		display: flex;
		flex: 1;
		min-width: 0
	}

	.acea-row.row-right {
		-o-box-pack: end;
		justify-content: flex-end
	}

	.list .name {
		color: #282828;
		font-size: 30upx;
		font-weight: 600
	}

	.is_detault_button {
		border: 1upx solid #1db0fc;
		color: #1db0fc;
		font-size: 20upx;
		height: 28upx;
		line-height: 28upx;
		margin-left: 18upx;
		text-align: center;
		width: 80upx
	}

	.invoice_type {
		background-color: #fcf0e0;
		color: #d67300;
		font-size: 24upx;
		height: 42upx;
		line-height: 42upx;
		margin-left: 30upx;
		text-align: center;
		width: 172upx
	}

	.invoice_special {
		background-color: #fde9e7;
		color: #e93323
	}

	.list .item-bd {
		margin-top: 18upx
	}

	.list .cell {
		color: #666;
		font-size: 26upx
	}

	.list .cell~.cell {
		margin-top: 12upx
	}

	.list .item-ft {
		margin-top: 11upx
	}

	.list .btn {
		color: #282828;
		cursor: pointer;
		display: -webkit-flex;
		display: flex;
		font-size: 26upx
	}

	.list .btn~.btn {
		margin-left: 35upx
	}

	.add-link {
		border-radius: 43upx;
		bottom: 53upx;
		color: #fff;
		font-size: 30upx;
		height: 86upx;
		left: 30upx;
		line-height: 86upx;
		position: fixed;
		right: 30upx;
		text-align: center
	}

	.wrapp {
		background-color: #e7f1ff;
		overflow: hidden;
		position: relative
	}

	.wrapp .ribbon {
		background-color: #1890ff;
		box-shadow: 0 0 20upx #888;
		overflow: hidden;
		position: absolute;
		right: -100upx;
		top: 16upx;
		transform: rotate(45deg);
		white-space: nowrap
	}

	.wrapp .ribbon ._span {
		color: #fff;
		display: block;
		padding: 10upx 100upx
	}

	.search-view {
		background-color: #fff;
		padding: 0 10upx 10upx
	}

	.path-card {
		border-radius: 4upx 16upx 16upx 4upx;
		overflow: hidden;
		position: relative;
		width: 100%;

		.left-box {
			width: 30%;
			float: left;
			height: 160upx;

			.times-box {
				color: #0195FD;
				border-left: 6upx solid #0195FD;
				height: 160upx;
				overflow: hidden;

				.num-box {
					width: 70upx;
					height: 90upx;
					line-height: 90upx;
					font-size: 28upx;
					margin-top: 36upx;
					margin-left: 74upx;

					.bnum {
						font-size: 60upx;
						font-weight: 900;
						padding-right: 6upx;
					}
				}
			}

			.rd-t {
				height: 24upx;
				width: 24upx;
				border-radius: 12upx;
				background: #F6F6F6;
				position: absolute;
				right: -12upx;
				top: -14upx;
			}

			.rd-b {
				height: 24upx;
				width: 24upx;
				border-radius: 24upx;
				background: #F6F6F6;
				position: absolute;
				right: -12upx;
				top: 148upx
			}
		}

		.right-box {
			width: 70%;
			float: right;

		}
	}

	.address-detail {
		color: #999
	}

	.address-card {
		margin-top: 24upx;
		overflow: hidden;

	}

	.address-title {
		font-size: 32upx;
		color: #333333;
	}

	.use-bnt {
		top: 52upx;
		right: 24upx;

		.ubnt {
			padding: 10upx 24upx;
			border-radius: 64upx;
			border: 2upx solid #0195FD;
		}
	}

	.type_1 {
		.times-box {
			color: #777777 !important;
			border-left: 6upx solid #777777 !important;
		}

		.ubnt {
			border: 2upx solid #dddddd !important;
			color: #AAAAAA !important;
		}
	}
</style>